<template>
	<div v-if="goodsDetails" class='commodity-details-container'>
		<div v-if="this.$route.params.show_type == 'story'">
			<div autoplay="true" indicator-dots="true" circular="true" class='swiper-container'>
				<mt-swipe v-if="typeof(goodsDetails.goods_imgs) == 'object'">
					<mt-swipe-item v-for="(item,index) in goodsDetails.goods_imgs" :key="index">
						<img class='swiper-item' :src="item" mode='aspectFill' lazy-load="true"></img>
					</mt-swipe-item>
				</mt-swipe>
				<mt-swipe v-else>
					<mt-swipe-item>
						<img class='swiper-item' :src="goodsDetails.goods_imgs" mode='aspectFill' lazy-load="true"></img>
					</mt-swipe-item>
				</mt-swipe>

			</div>
			<span class='goods-title'>{{goodsDetails.goods_name}}</span>
			<span class='goods-subtitle'>{{goodsDetails.goods_jingle}}</span>
			<div class='pirce-container'>
				<span class='discount'> ￥{{goodsDetails.goods_price}}/{{goodsDetails.units}}</span>
			</div>
			<div class='recommend'>
				<span class='recommend-title'>推荐理由</span>
				<div class='recommend-list'>
					<span class='recommend-item' v-for="(item,index) in goodsDetails.tuijian" :key="index">{{item}}</span>
				</div>
				<!--<div class='recommend-detail-btn' @click='showRichspan'>
					<span class='recommend-detail-span'>图文详情</span>
					<img src='../../../../static/img/triangle.svg' class='icon-more' />
				</div>-->
			</div>
		</div>
		<div class="image-text" v-html="goodsDetails.goods_body">
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions } from 'vuex';

	export default {
		data() {
			return {
				//				isShowImageText: false
			}
		},
		computed: {
			...mapState(['goodsDetails'])
		},
		mounted() {},
		created() {},
		methods: {
			//			showRichspan() {
			//				this.isShowImageText = !this.isShowImageText;
			//			}
		},

	}
</script>
<style scoped>
	.image-text>>>img {
		width: calc(100% + 40px)
	}
</style>
<style lang="scss" scoped>
	.commodity-details-container {
		.image-text {
			margin-left: -40px;
		}
		.swiper-container {
			width: 100%;
			height: 572px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.goods-title {
			display: block;
			margin-top: 40px;
			line-height: 80px;
			font-size: 48px;
			color: #2b3038;
		}
		.goods-subtitle {
			display: block;
			font-size: 28px;
			color: #9b9b9b;
			line-height: 40px;
		}
		.pirce-container {
			padding: 24px 0 50px;
			.discount {
				display: inline-block;
				color: #ef364e;
				font-size: 40px;
				line-height: 56px;
			}
		}
		.recommend {
			padding: 60px 0;
			box-shadow: 0 1px #e5e5e4 inset, 0 -1px #e5e5e4 inset;
			.recommend-title {
				display: block;
				font-size: 36px;
				color: #000000;
				line-height: 48px;
				margin-bottom: 48px;
			}
			.recommend-list {
				padding-bottom: 40px;
				.recommend-item {
					display: block;
					position: relative;
					margin-bottom: 20px;
					padding-left: 40px;
					color: #444;
					font-size: 30px;
					line-height: 42px;
				}
			}
			.recommend-detail-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 200px;
				height: 66px;
				padding: 0 32px 0 32px;
				border: 2px solid #e6e6e6;
				border-radius: 200px;
				line-height: 66px;
				color: #4a4a4a;
				font-size: 28px;
				text-align: center;
				img {
					margin-top: 2px;
				}
			}
		}
	}
</style>